new Vue({
    el: '#app',
    data: {
        dk_type: '1',
        gjj_value: '',
        gjj_year: '30',
        gjj_lilv: '0.0325',
        sd_value: '',
        sd_year: '30',
        sd_lilv: '0.049',
        btnStatus: true,
        bx_data: {
            yuegong: 0,
            totalLixi: 0,
            totalPrice: 0
        },
        bj_data: {
            yuegong: 0,
            totalLixi: 0,
            totalPrice: 0,
            yuegongdijian: 0
        },
        showType: 0,
        showStatus: false,
        showDetailBtn: false,
        activeName: 'name1',
        mobile: '',
        seeHouse: false,
        modal_loading: false,
        formValidate: {
            name: '',
            tel: '',
            captcha: '',
            verify: '',
            show_date: '随时',
            show_time: '全天',
            message:'',
            type: document.getElementById('d_type').value,
            property: document.getElementById('property').value
        },
        ruleValidate: {
            name: [
                { required: true, message: '称呼一定要填哦', trigger: 'blur' }
            ],
            tel: [
                { required: true, message: '手机号一定要填哦', trigger: 'blur' },
                { type: 'string', pattern: /^1[3456789][0-9]{9}$/, message: '手机号格式错误', trigger: 'blur' },
            ],
            captcha: [
                { required: true, message: '验证码一定要填哦', trigger: 'blur' }
            ],
            verify: [
                { required: true, message: '短信验证码一定要填哦', trigger: 'blur' }
            ],
        },
        errors:{
            name:'',
            tel:'',
            captcha:'',
            verify:''
        },
        captchaStatus: false,
        verifyTxt:'获取短信验证码',
        count: '',
        timer: null,
        verify_disabled: true,
        cancelTime: [],
        verify_loading:false,
        send_loading: false,
    },
    methods: {
        sendSubscribe(){
            // 订阅
        },
        handleJump(res){
            // 点击锚点
            var id = document.getElementById('property').value
            if (res == '#hand'){
                window.open('/community/hand/'+id)
            }else if(res == '#rental'){
                window.open('/community/rental/'+id)
            }
        },
        handleSubmit(){
            // 预约看房
            this.send_loading = true
            var formData = this.formValidate
            var that  = this
            axios.post('/saveViewHouse',formData).then(function (response) {
                that.send_loading = false
                if(!response.data.code){
                    that.seeHouse = false
                    that.formValidate = {
                        name: '',
                        tel: '',
                        verify: '',
                        captcha: '',
                        show_date: '随时',
                        show_time: '全天',
                        message:'',
                        type: document.getElementById('d_type').value,
                        property: document.getElementById('property').value
                    }
                    that.$Message.success(response.data.msg)
                }else{
                    that.$Message.error(response.data.msg)
                    that.changeCaptcha()
                }
            }).catch(function (error) {
                that.send_loading = false
                that.changeCaptcha()
                if (typeof error.response.data.errors.name != "undefined") {
                    that.errors.name = error.response.data.errors.name[0]
                }
                if (typeof error.response.data.errors.tel != "undefined") {
                    that.errors.tel = error.response.data.errors.tel[0]
                }
                if (typeof error.response.data.errors.captcha != "undefined") {
                    that.errors.captcha = error.response.data.errors.captcha[0]
                }
                if (typeof error.response.data.errors.verify != "undefined") {
                    that.errors.verify = error.response.data.errors.verify[0]
                }
            });
        },
        handleTel(){
            // 验证手机号
            if((/^1[3456789][0-9]{9}$/.test(this.formValidate.tel))){
                this.verify_disabled = false
            }else{
                this.verify_disabled = true
            }
        },
        checkCaptcha(){
            var that = this
            axios.post('/checkCaptcha',{captcha:that.formValidate.captcha}).then(function (response) {
                if (response.data.code) {
                    that.captchaStatus = false
                    // that.errors.captcha = '验证码错误';
                    that.$Message.error('验证码错误');
                }else{
                    that.captchaStatus = true
                }
            }).catch(function (error) {
                that.captchaStatus = false
                // that.errors.captcha = '验证码错误';
                that.$Message.error('验证码错误');
            });
        },
        changeCaptcha(){
            this.captchaStatus = false
            let res = this.$refs.captcha.src
            this.$refs.captcha.src = res+'?'+Math.random()
        },
        sendVerify(){
            //验证码验证
            if(!this.captchaStatus){
                this.$Message.error('验证码错误');
                return
            }
            var that  = this
            if (!that.captchaStatus) {
                that.errors.captcha = '验证码错误'
                return
            }
            // 发送验证码
            that.verify_loading = true
            const TIME_COUNT = 60;
            var formData = {
                'mobile': that.formValidate.tel
            }
            axios.post('/sms/verify-code',formData).then(function (response) {
                that.verify_loading = false
                if(response.data.success){
                    that.verify_disabled = true
                    if (!that.timer) {
                        that.count = TIME_COUNT;
                        that.timer = setInterval(() => {
                            if (that.count > 0 && that.count <= TIME_COUNT) {
                                that.count--;
                                that.verifyTxt = that.count+'秒后再次发送'
                            } else {
                                that.verifyTxt = '获取短信验证码'
                                clearInterval(that.timer);
                                that.timer = null;
                                that.verify_disabled = false
                            }
                        }, 1000)
                    }
                }else{
                    that.$Message.error(response.data.message)
                }
            }).catch(function (error) {
                that.verify_loading = false
            });
        },
        format (date,day) {
            var nd = date
            nd = nd.valueOf()
            var cdate = []
            var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            for (var i=0;i<day;i++){
                let time = nd + i *24 * 60 * 60 * 1000
                // cdate[i] = time
                let time2 = new Date(time)
                var y = time2.getFullYear()// 获取年
                var m = time2.getMonth() + 1// 获取月
                var d = time2.getDate()// 获取天
                if (m <= 9) m = '0' + m
                if (d <= 9) d = '0' + d
                cdate[i] = {
                    'week': weekday[time2.getDay()],
                    'date': y + '-' + m + '-' + d,
                    'day' : d
                }
                // y + '-' + m + '-' + d
            }
            return cdate
        },
        handleChangeType(val){
            this.dk_type = val
            this.gjj_value = ''
            this.sd_value = ''
            this.showDetailBtn = false
            this.btnStatus = true
            this.bx_data = {
                yuegong: 0,
                totalLixi: 0,
                totalPrice: 0
            }
            this.bj_data = {
                yuegong: 0,
                totalLixi: 0,
                totalPrice: 0,
                yuegongdijian: 0
            }
        },
        showList(val){
            this.showStatus = true
            if(val === 1){
                this.activeName = 'name1'
            }else if(val === 2){
                this.activeName = 'name2'
            }
        },
        handleChangeValue(){
            if (this.dk_type === '1'){
                if(this.fortrim(this.sd_value).length){
                    this.btnStatus = false
                }else{
                    this.btnStatus = true
                }
            }else if(this.dk_type === '2'){
                if(this.fortrim(this.gjj_value).length){
                    this.btnStatus = false
                }else{
                    this.btnStatus = true
                }
            }else if(this.dk_type === '3'){
                if(this.fortrim(this.gjj_value).length && this.fortrim(this.sd_value).length){
                    this.btnStatus = false
                }else{
                    this.btnStatus = true
                }
            }
        },
        fortrim(s){
            //去左右空格;
            return s.replace(/(^\s*)|(\s*$)/g, "");
        },
        calResult(){
            if (this.dk_type === '1'){
                if(!this.sd_value.length){
                    this.$Message.error('请填写贷款金额')
                    return
                }
            }else if(this.dk_type === '2'){
                if(!this.gjj_value.length){
                    this.$Message.error('请填写贷款金额')
                    return
                }
            }else if(this.dk_type === '3'){
                if(!this.gjj_value.length || !this.sd_value.length){
                    this.$Message.error('请填写贷款金额')
                    return
                }
            }
            if (this.dk_type === '1'){
                var benxiData = this.singleDk(1,this.sd_value,this.sd_year,this.sd_lilv,this.sd_value)
                var benjinData = this.singleDk(2,this.sd_value,this.sd_year,this.sd_lilv,this.sd_value)
            }else if (this.dk_type === '2'){
                var benxiData = this.singleDk(1,this.gjj_value,this.gjj_year,this.gjj_lilv,this.gjj_value)
                var benjinData = this.singleDk(2,this.gjj_value,this.gjj_year,this.gjj_lilv,this.gjj_value)
            }else if (this.dk_type === '3'){
                var benxiData = this.zuhe(1, this.sd_value, this.gjj_value, this.sd_year, this.gjj_year, this.sd_lilv, this.gjj_lilv)
                var benjinData = this.zuhe(2, this.sd_value, this.gjj_value, this.sd_year, this.gjj_year, this.sd_lilv, this.gjj_lilv)
            }
            this.showDetailBtn = true
            this.bx_data = benxiData
            this.bj_data = benjinData
        },
        singleDk(type, num, year, lilv){
            //商贷-公积金贷款统一函数
            var _this = this;
            // type:1等额本息 2等额本金，num 贷款金额 year贷款年限，lilv：贷款基准利率
            if (type == 1) {
                return _this.benxi(type, num, year, lilv)
            } else if (type == 2) {
                return _this.benjin(type, num, year, lilv)
            }
        },
        benxi(type, num, year, lilv){
            //组合贷款计算
            //每月月供额=〔贷款本金×月利率×(1＋月利率)＾还款月数〕÷〔(1＋月利率)＾还款月数-1〕
            var mouth = parseInt(year) * 12,
                mouthlilv = parseFloat(lilv) / 12,
                dknum = parseFloat(num) * 10000;
            //每月月供
            var yuegong = (dknum * mouthlilv * Math.pow((1 + mouthlilv), mouth)) / (Math.pow((1 + mouthlilv), mouth) - 1);
            //总利息=还款月数×每月月供额-贷款本金
            var totalLixi = mouth * yuegong - dknum;
            //还款总额 总利息+贷款本金
            var totalPrice = totalLixi + dknum,
                leftFund = totalLixi + dknum;
            // 转换成万元
            totalLixi = totalLixi/10000
            totalPrice = totalPrice/10000

            //循环月份
            var mouthdataArray = [],
                nowmouth = new Date().getMonth(),
                realmonth = 0;

            for (var i = 1; i <= mouth; i++) {
                realmonth = nowmouth + i;
                var yearlist = Math.floor(i / 12);

                realmonth = realmonth - 12 * yearlist;

                if (realmonth > 12) {
                    realmonth = realmonth - 12
                }
                //console.log(realmonth)
                //每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
                var yuelixi = dknum * mouthlilv * (Math.pow((1 + mouthlilv), mouth) - Math.pow((1 + mouthlilv), i - 1)) / (Math.pow((1 + mouthlilv), mouth) - 1);
                //每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
                var yuebenjin = dknum * mouthlilv * Math.pow((1 + mouthlilv), i - 1) / (Math.pow((1 + mouthlilv), mouth) - 1);
                leftFund = leftFund - (yuelixi + yuebenjin);
                if (leftFund < 0) {
                    leftFund = 0
                }
                mouthdataArray[i - 1] = {
                    monthName: realmonth + "月",
                    yuelixi: yuelixi,
                    yuebenjin: yuebenjin,
                    //剩余还款
                    leftFund: leftFund
                }
            }

            return {
                yuegong: yuegong.toFixed(2),
                totalLixi: totalLixi.toFixed(2),
                totalPrice: totalPrice.toFixed(2),
                mouthdataArray: mouthdataArray,
                totalDknum: num,
                year: year
            };
        },
        benjin(type, num, year, lilv){
            var mouth = parseInt(year) * 12,
                mouthlilv = parseFloat(lilv) / 12,
                dknum = parseFloat(num) * 10000,
                yhbenjin = 0; //首月还款已还本金金额是0
            //每月应还本金=贷款本金÷还款月数
            var everymonthyh = dknum / mouth
            //每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
            var yuegong = everymonthyh + (dknum - yhbenjin) * mouthlilv;
            //每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
            var yuegongdijian = everymonthyh * mouthlilv;
            //总利息=〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额
            var totalLixi = ((everymonthyh + dknum * mouthlilv) + dknum / mouth * (1 + mouthlilv)) / 2 * mouth - dknum;
            //还款总额 总利息+贷款本金
            var totalPrice = totalLixi + dknum,
                leftFund = totalLixi + dknum;
            // 转换成万元
            totalLixi = totalLixi/10000
            totalPrice = totalPrice/10000

            //循环月份
            var mouthdataArray = [],
                nowmouth = new Date().getMonth(),
                realmonth = 0;

            for (var i = 1; i <= mouth; i++) {
                realmonth = nowmouth + i;
                var yearlist = Math.floor(i / 12);

                realmonth = realmonth - 12 * yearlist;

                if (realmonth > 12) {
                    realmonth = realmonth - 12
                }
                yhbenjin = everymonthyh * (i - 1);
                var yuebenjin = everymonthyh + (dknum - yhbenjin) * mouthlilv;
                //每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率
                var yuelixi = (dknum - yhbenjin) * mouthlilv;
                leftFund = leftFund - yuebenjin;
                if (leftFund < 0) {
                    leftFund = 0
                }

                mouthdataArray[i - 1] = {
                    monthName: realmonth + "月",
                    yuelixi: yuelixi,
                    //每月本金
                    yuebenjin: everymonthyh,
                    //剩余还款
                    leftFund: leftFund
                }
            }

            return {
                yuegong: yuegong.toFixed(2),
                totalLixi: totalLixi.toFixed(2),
                totalPrice: totalPrice.toFixed(2),
                yuegongdijian: yuegongdijian.toFixed(2),
                mouthdataArray: mouthdataArray,
                totalDknum: num,
                year: year
            }
        },
        zuhe(type, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv){
            var _this = this,
                year = sdyear > gjjyear ? sdyear : gjjyear;
            if (type == 1) {
                var sdObj = _this.benxi(type, sdnum, sdyear, sdlilv);
                var gjjObj = _this.benxi(type, gjjnum, gjjyear, gjjlilv);

                if (sdObj.mouthdataArray.length > gjjObj.mouthdataArray.length) {
                    var mergemouthdataArray = sdObj.mouthdataArray.map(function (item, index) {
                        if (index < gjjObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi) + parseFloat(gjjObj.mouthdataArray[index].yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin) + parseFloat(gjjObj.mouthdataArray[index].yuebenjin),
                                leftFund: parseFloat(item.leftFund) + parseFloat(gjjObj.mouthdataArray[index].leftFund)
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin),
                                leftFund: parseFloat(item.leftFund)
                            }
                        }

                    })
                } else {
                    var mergemouthdataArray = gjjObj.mouthdataArray.map(function (item, index) {
                        if (index < sdObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi) + parseFloat(sdObj.mouthdataArray[index].yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin) + parseFloat(sdObj.mouthdataArray[index].yuebenjin),
                                leftFund: parseFloat(item.leftFund) + parseFloat(sdObj.mouthdataArray[index].leftFund)
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin),
                                leftFund: parseFloat(item.leftFund)
                            }
                        }
                    })
                }
                return {
                    yuegong: (parseFloat(sdObj.yuegong) + parseFloat(gjjObj.yuegong)).toFixed(2),
                    totalLixi: (parseFloat(sdObj.totalLixi) + parseFloat(gjjObj.totalLixi)).toFixed(2),
                    totalPrice: (parseFloat(sdObj.totalPrice) + parseFloat(gjjObj.totalPrice)).toFixed(2),
                    mouthdataArray: mergemouthdataArray,
                    totalDknum: (parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum)).toFixed(2),
                    year: year,
                }

            } else if (type == 2) {
                var sdObj = _this.benjin(type, sdnum, sdyear, sdlilv);
                var gjjObj = _this.benjin(type, gjjnum, gjjyear, gjjlilv);
                if (sdObj.mouthdataArray.length > gjjObj.mouthdataArray.length) {
                    var mergemouthdataArray = sdObj.mouthdataArray.map(function (item, index) {
                        if (index < gjjObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi) + parseFloat(gjjObj.mouthdataArray[index].yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin) + parseFloat(gjjObj.mouthdataArray[index].yuebenjin),
                                leftFund: parseFloat(item.leftFund) + parseFloat(gjjObj.mouthdataArray[index].leftFund)
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin),
                                leftFund: parseFloat(item.leftFund)
                            }
                        }

                    })
                } else {
                    var mergemouthdataArray = gjjObj.mouthdataArray.map(function (item, index) {
                        if (index < sdObj.mouthdataArray.length) {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi) + parseFloat(sdObj.mouthdataArray[index].yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin) + parseFloat(sdObj.mouthdataArray[index].yuebenjin),
                                leftFund: parseFloat(item.leftFund) + parseFloat(sdObj.mouthdataArray[index].leftFund)
                            }
                        } else {
                            return {
                                monthName: item.monthName,
                                yuelixi: parseFloat(item.yuelixi),
                                yuebenjin: parseFloat(item.yuebenjin),
                                leftFund: parseFloat(item.leftFund)
                            }
                        }
                    })
                }
                return {
                    yuegong: (parseFloat(sdObj.yuegong) + parseFloat(gjjObj.yuegong)).toFixed(2),
                    totalLixi: (parseFloat(sdObj.totalLixi) + parseFloat(gjjObj.totalLixi)).toFixed(2),
                    totalPrice: (parseFloat(sdObj.totalPrice) + parseFloat(gjjObj.totalPrice)).toFixed(2),
                    yuegongdijian: (parseFloat(sdObj.yuegongdijian) + parseFloat(gjjObj.yuegongdijian)).toFixed(2),
                    totalDknum: (parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum)).toFixed(2),
                    year: year,
                    mouthdataArray: mergemouthdataArray,
                }
            }
        }
    },
    mounted() {
        $( '#sliderpro' ).sliderPro({
            width: 600,
            height: 400,
            orientation: 'vertical',
            loop: false,
            arrows: true,
            buttons: false,
            thumbnailsPosition: 'bottom',
            thumbnailPointer: true,
            thumbnailWidth: 120,
        });
        this.cancelTime = this.format(new Date(),7)
    }
})